﻿@model GalleryModel
@{
    ViewBag.Title = "Gallery";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var photographs = ViewBag.Photographs;
}

@section Style{
    <style type="text/css">
        .pg_container {
            width: 100%;
            position: relative;
            top: 20px;
            bottom: 20px;
            height: 472px;
        }

        ul.pg_photos {
            position: absolute;
            top: 0;
            left: 0;
            height: 412px;
            width: 12188px; /*This is set dynamically*/
            list-style-type: none;
        }

        ul.pg_photos li {
            float: left;
            position: relative;
            margin-right: 7px;
        }

        ul.pg_photos li a {
            display: block;
            border: 6px solid #fff;
            position: relative;
            -moz-box-shadow: 1px 1px 7px #000;
            -webkit-box-shadow: 1px 1px 7px #000;
            box-shadow: 1px 1px 7px #000;
        }

        ul.pg_photos li a span {
            background: #423B30;
            opacity: 0.6;
            position: absolute;
            padding: 20px;
            font-size: 12px;
            text-shadow: 1px 1px 1px #000;
            top: 20px;
            right: 0px;
            color: #fff;
            -moz-box-shadow: 1px 0px 2px #000 inset;
            -webkit-box-shadow: 1px 0px 2px #000 inset;
            box-shadow: 1px 0px 2px #000 inset;
        }

        ul.pg_photos li img {
            display: block;
            border: none;
            height: 412px;
        }

        .pg_scrollWrapper {
            position: absolute;
            top: 12px;
            left: 50%;
            width: 300px;
            margin-left: -175px;
            padding: 10px 15px;
            height: 4px;
            background: #111;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }
    </style>
}

@section Script{
    <script src="/Scripts/jquery-ui-1.8.24.min.js"></script>
}


<div style="display: none;">
    <div id="pg_scrollWrapper" class="pg_scrollWrapper">
        <div id="slider" class="slider"></div>
    </div>
</div>

<div class="wall">
    <div id="pg_container" class="pg_container">
        <ul id="pg_photos" class="pg_photos">
            <!-- calculate top-->
            @foreach (var photograph in photographs)
            {
                <li><a href="/Assets/Member/@(Model.Id)/@(photograph.Url).jpg" class="photograph" rel="photograph">
                    <img src="/Assets/Member/@(Model.Id)/@(photograph.Url).jpg" alt="@(photograph.Caption)" /></a></li>
            }
        </ul>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('.photograph').fancybox();
    });
</script>

<script type="text/javascript">
    /*
    the images preload plugin
    */
    (function ($) {
        $.fn.preload = function (options) {
            var opts = $.extend({}, $.fn.preload.defaults, options);
            o = $.meta ? $.extend({}, opts, this.data()) : opts;
            var c = this.length,
                l = 0;
            return this.each(function () {
                var $i = $(this);
                $('<img/>').load(function (i) {
                    ++l;
                    if (l == c) o.onComplete();
                }).attr('src', $i.attr('src'));
            });
        };
        $.fn.preload.defaults = {
            onComplete: function () { return false; }
        };
    })(jQuery);
</script>
<script type="text/javascript">
    $(function () {
        var $slider = $('#slider'),
            $pg_photos = $('#pg_photos'),
            $pg_container = $('#pg_container'),
            $pg_scrollWrapper = $('#pg_scrollWrapper'),
            $pg_photos_elem = $pg_photos.children(),
            $pg_photos_img = $pg_photos_elem.find('img'),
            pg_photos_width = 0;

        //preload the images
        $pg_photos_img.preload({
            onComplete: function () {
                init();
                //force the hashchange event
                //so that it slides to the image passed in the url
                $(window).hashchange();
            }
        });
        function init() {
            configGallery();
            initSlider();
            initEvents();
        }

        function configGallery() {
            $('BODY').css('overflow-x', 'hidden');
            //we need to set the width of the $pg_photos,
            //which is the sum of its childrens width
            $pg_photos.children().each(function () {
                pg_photos_width += $(this).outerWidth(true);
            });
            $pg_photos.css('width', pg_photos_width + 'px');
        }
        function initSlider() {
            $pg_scrollWrapper.show();
            //innitialize the slider
            var old_value = 0, //last value of the slider
                dir = 1; //direction 	
            $slider.slider('destroy').slider({
                orientation: 'horizontal',
                max: pg_photos_width - $pg_photos.children(':last').outerWidth(true),
                min: 0,
                value: 0,
                slide: function (event, ui) {
                    $pg_photos.css('left', -ui.value + 'px');
                },
                stop: function (event, ui) {
                }
            });
        }
        function initEvents() {
            //if we mouse over a photo, show the description sored in the alt attr
            $pg_photos_elem.bind('mouseenter', function (e) {
                var $e = $(this);
                $img = $e.find('img'),
                descr = $img.attr('alt');

                $('<span>' + descr + '</span>').hide().insertAfter($img).fadeIn();
            }).bind('mouseleave', function (e) {
                var $e = $(this);
                $descr = $e.find('span');

                $descr.fadeOut();
            });

            //slide as we scroll with the mouse
            $pg_container.mousewheel(function (e, delta) {
                var speed = 450,
                    inc = -delta * speed,
                        min = $slider.slider('option', 'min'),
                        max = $slider.slider('option', 'max');

                var val = $slider.slider('value') + inc;
                if (val < min)
                    val = min;
                else if (val > max)
                    val = max;

                $slider.slider('value', val);
                $pg_photos.stop().animate({
                    left: -(val) + 'px'
                }, 800, 'easeOutExpo', function () {
                });
                return false;
            });

            $(window).hashchange(function () {
                //the index in the url hash
                var idx = location.hash.split('#')[1];
                if (!idx) {
                    return;
                }

                var current_left = parseFloat($pg_photos.css('left'), 10),
                elem_left = $pg_photos_elem.eq(idx - 1).offset().left;
                //update the ui slider 
                $slider.slider('value', Math.abs(parseInt(current_left - elem_left, 10)));
                //slide to element
                $pg_photos.stop().animate({
                    left: current_left - elem_left + 'px'
                }, 800, 'easeInOutExpo');
            });
        }
    });
</script>

